<script>
    /**
     * 招商业绩编辑
     * @Author Mumu xinglinhe@qq.com
     * @Date 2022/09/13
     */
    
    import { ref } from 'vue';
    
    export default{
        components:{
    
        },
        props:{
    
        },
        data(){
            return {
                visible:false,
                loading:false,
                data:{},
                value1 : [],
                expandedKeys:[],
                selectedKeys:[],
                checkedKeys:[],
                fieldNames : {
                    children: 'child',
                    title: 'name',
                },
                treeData : [],
                bodystyle : {
                    height: '480px',
                    overflow: 'hidden',
                    overflowY: 'scroll',
                },
            }
        },
        watch: {
            expandedKeys(newVal, oldVal) {
            // 监听 num 属性的数据变化
            // 作用 : 只要 num 的值发生变化,这个方法就会被调用
            // 第一个参数 : 新值
            // 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        },
        created(){},
        mounted(){},
        methods:{
            async send(){
                this.loading=true;
                this.data.rule_list = this.checkedKeys;
                let rs = await this.muajax.save_rolerule({
                    ...this.data,
                });
                this.loading=false;
                if(rs.code==200){
                    this.$message.success(rs.msg);
                    this.visible=false;
                    this.$emit("update_list");
                }
            },
            async datainit(){
                let rs = await this.muajax.roleauthor({ id : this.param.id});
                if(rs.code==200){
                    this.treeData=rs.list;
                    this.checkedKeys=rs.checkedKeys;
                }
            },//初始化本页数据
            show(show,param){
                this.visible=show;
                if(param) {
                    if(show){
                        this.param=param;
                        if(!!this.param?.id)
                            this.data.id = this.param.id;
                            this.datainit();
                    }
                } else {
                    this.data=[{}];
                }
            },
        },
        computed:{},
        watch:{},
        filters:{},
    }
    </script>
    <template>
        <a-modal
            v-model:visible="visible"
            width="500px"
            title="角色授权"
            :maskClosable="false"
            @ok="send"
            cancelText="取消"
            :body-style="bodystyle"
            okText="提交"
            :confirmLoading="loading"
        >
            <a-tree
                v-model:expandedKeys="expandedKeys"
                v-model:selectedKeys="selectedKeys"
                v-model:checkedKeys="checkedKeys"
                checkable
                :tree-data="treeData"
    
            >
                <template #title="{ title, key }">
                <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                <template v-else>{{ title }}</template>
                </template>
            </a-tree>
        </a-modal>
    </template>
    <style lang="less" scoped>
    
    </style>